<template>
  <div class="order-main">
    <el-card class="search-box card" shadow="never">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="find.username" style="width:180px" type="primary" size="small" placeholder="用户名/模糊查询" />
        </el-col>
        <el-col :span="6">
          <!-- 订单状态 0 未付款; 1 已付款 ;  2 已发货; 3: 已收货; 9 申请退款 -->
          <el-select v-model="find.status" size="small" placeholder="订单状态">
            <el-option
              v-for="item in orderstatus"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="find.statusend" size="small" placeholder="是否关闭">
            <el-option
              v-for="item in options"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button size="small">重置</el-button>
          <el-button type="primary" size="small">查找</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 订单列表 -->
    <el-card class="order-list card" shadow="never">
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column fixed align="center" type="index" label="#" width="150" />
        <el-table-column fixed align="center" prop="username" label="用户账户" width="200" />
        <el-table-column align="center" prop="addTime" label="添加时间" width="200" />

        <el-table-column align="center" label="数量/金额" width="120">
          <template slot-scope="scope">
            <p><span>数量:</span> <span style="color:orange">{{ scope.row.count }}</span></p>
            <p><span>金额:￥</span> <span style="color:red">{{ scope.row.price }}</span></p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="支付状态" width="200">
          <!-- 订单状态 0 未付款; 1 已付款 ;  2 已发货; 3: 已收货; 9 申请退款 -->
          <template slot-scope="scope">
            <div v-if="scope.row.orderStatus > '0'">
              <svg-icon v-if="scope.row.payType == 'wxpay'" icon-class="wx-pay" style="font-size:30px" />
              <svg-icon v-else-if="scope.row.payType == 'alipay'" icon-class="ali-pay" style="font-size:30px" />
              <svg-icon v-else icon-class="unknown" style="color:'gray'" />
            </div>

            <!-- <el-button v-if="scope.row.orderStatus == '0'" size="mini"></el-button> -->
            <el-button v-if="scope.row.orderStatus == 0" style="font-size:12px;padding:0 0;" size="mini" @click="orderDetail(scope.row.orderId)">未付款</el-button>
            <el-button v-if="scope.row.orderStatus == 1" style="font-size:12px;padding:0 0;" plain type="warning" size="mini" @click="orderDetail(scope.row.orderId)">已付款</el-button>
            <el-button v-if="scope.row.orderStatus == 2" style="font-size:12px;padding:0 0;" plain type="primary" size="mini" @click="orderDetail(scope.row.orderId)">已发货</el-button>
            <el-button v-if="scope.row.orderStatus == 3" style="font-size:12px;padding:0 0;" plain type="success" size="mini" @click="orderDetail(scope.row.orderId)">已收货</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="statusend" label="订单状态" width="200">
          <template slot-scope="scope">
            <div>
              <svg-icon v-if="scope.row.statusend == '1'" class="icon-status" style="color:#3BB430;" icon-class="processdone" />
              <svg-icon v-if="scope.row.statusend == '0'" class="icon-status" style="color:#f4f4f4;" icon-class="statusing" />
              <p v-if="scope.row.statusend == '1'">完成时间:{{ scope.row.doneTime }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="orderId" label="订单编号" width="200" />
        <el-table-column align="center" fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="orderDetail(scope.row.orderId)">查看订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import { orderList } from '@/api/order/index'
export default {
  data() {
    return {
      find: {
        username: '',
        status: '',
        statusend: ''
      },
      orderstatus: [{
        value: '0',
        label: '未付款'
      }, {
        value: '1',
        label: '已付款'
      }, {
        value: '2',
        label: '已发货'
      }, {
        value: '3',
        label: '已收货'
      }, {
        value: '9',
        label: '申请退货'
      }],
      options: [
        {
          value: '0',
          label: '正在进行'
        },
        {
          value: '1',
          label: '已关闭'
        }
      ],
      orderList: [], // 订单列表
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0
      }
    }
  },
  created() {
    this.getOrderlist()
  },
  methods: {
    orderDetail(orderId) {
      this.$router.push({ name: 'orderdetail', params: { orderId }})
    },
    getOrderlist() {
      orderList({
        start: this.page.start,
        limit: this.page.limit,
        ...this.find
      }).then(res => {
        console.log(res)
        this.orderList = res.data.list
        this.page.totalCount = res.data.totalRow
      })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.limit = val
      this.getOrderlist()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.start = val
      this.getOrderlist()
    }
  }
}
</script>

<style lang="scss" scoped>
    .card{
        margin:30px;
    }
    .block{
        margin:10px;
        text-align:right;
    }
    ::v-deep .icon-status{
        font-size:50px;
    }
</style>
